﻿@page "/ChartFinancialSeries"
@using System.Linq
@inject ISalesViewerDataProvider SalesViewerDataProvider
@layout DataProviderAccessArea<ISalesViewerDataProvider>
<div class="demo-description" id="Candlestick">
    <h2><DemoNavLink Link="ChartFinancialSeries#Candlestick" />Charts - Candlestick Series</h2>
    <p>
        This demo illustrates how to use <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartCandlestickSeries-3">Candlestick</a> series within the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChart-1">Chart</a> component.
        In this module, the candlestick series displays stock price changes for a day.
        Each series point consists of a rectangle (body) whose bottom and topmost values correspond to the open and close price of a stock.
        A vertical line (shadow, wick or tail) displays the high and low price for the stock.
        If the stock closes higher than its open price, the corresponding body is not filled.
        If the stock closes lower than its open price, the corresponding body is filled.
    </p>
</div>
<DxChart Data="@ProductSalesData"
         CssClass="mw-1100">
    <DxChartLegend Position="RelativePosition.Outside" />
    <DxChartCandlestickSeries ValueField="@((Sale i) => i.TotalCost)" ArgumentField="@(i => i.SaleDate.Date)" Name="@($"{Product.Name} Sales")" />
    <DxChartArgumentAxis>
        <DxChartAxisLabel Format="ChartAxisLabelFormat.ShortDate" />
    </DxChartArgumentAxis>
    <DxChartTooltip>
        @context.GetFinancialPoint().Render((financialPoint) =>
            @<div class="p-3">
                <p>Open: @financialPoint.OpenValue</p>
                <p>Close: @financialPoint.CloseValue</p>
                <p>High: @financialPoint.HighValue</p>
                <p>Low: @financialPoint.LowValue</p>
            </div>
        )
    </DxChartTooltip>
</DxChart>
<CodeSnippet_Charts_CandlestickSeries />
<div class="demo-description" id="Stock">
    <h2><DemoNavLink Link="ChartFinancialSeries#Stock" />Charts - Stock Series</h2>
    <p>
        This demo illustrates how to use <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartStockSeries-3">Stock</a> series within the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChart-1">DxChart</a> component. Stock series display stock prices changes for a day.
        The vertical line’s bottom and top values represent the high and low prices. The left and right tick marks represent the open and close prices.
    </p>
</div>
<DxChart Data="@ProductSalesData"
         CssClass="mw-1100">
    <DxChartLegend Position="RelativePosition.Outside" />
    <DxChartStockSeries ValueField="@((Sale i) => i.TotalCost)" ArgumentField="@(i => i.SaleDate.Date)" Name="@($"{Product.Name} Sales")" />
    <DxChartArgumentAxis>
        <DxChartAxisLabel Format="ChartAxisLabelFormat.ShortDate" />
    </DxChartArgumentAxis>
    <DxChartTooltip>
        @context.GetFinancialPoint().Render((financialPoint) =>
                @<div class="p-3">
                    <p>Open: @financialPoint.OpenValue</p>
                    <p>Close: @financialPoint.CloseValue</p>
                    <p>High: @financialPoint.HighValue</p>
                    <p>Low: @financialPoint.LowValue</p>
                </div>
)
    </DxChartTooltip>
</DxChart>
<CodeSnippet_Charts_StockSeries />
@code {
    Product Product;
    IEnumerable<Sale> ProductSalesData;

    protected override async Task OnInitializedAsync()
    {
        Product = (await SalesViewerDataProvider.GetProducts()).FirstOrDefault(x => x.Name == "Eco Supreme");
        ProductSalesData = (await SalesViewerDataProvider.GetSales()).Where(x => x.ProductId == Product.Id);
    }
}
